<template>
	<view class="container">
		<view class="top">
			<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0dc3105f-c3f7-416d-8f05-370ec89cf74c.png" mode="aspectFill"></image>
			<image class="titleImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/652d374b-9c9e-4161-902a-979fedca559f.png" mode="aspectFill"></image>
			<view class="subImg">
				<image class="subTitle" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/91bf10d5-2d91-44bf-a437-967a7b0b1268.png" mode="aspectFill"></image>
				<view class="title">提升资产福利享不停</view>
			</view>
			
		</view>
		<view class="bottom">
			<view class="uni-margin-wrap" v-if="swiperInfo?.length>0">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" autoplay="true" vertical interval="2000"
					duration="500">
					<swiper-item v-for="(item,index) in swiperInfo" :key="index">
						<view class="swiper-item uni-bg-red">恭喜用户{{ item.phone}}完成了资产提升！</view>
					</swiper-item>
					
				</swiper>
			</view>
			<!-- <uni-notice-bar @click="goToNoUseOrder" class="notification" background-color="rgba(0,0,0,.5)" style="padding: 0;height: 48rpx;" color="white" showIcon scrollable single speed="80" :text="'恭喜用户'+currentText +'完成了资产提升！'"></uni-notice-bar> -->
			<uni-notice-bar v-if="swiperInfo?.length>0" @click="goToNoUseOrder" class="notification" background-color="rgba(0,0,0,.5)" style="padding: 0;height: 48rpx;" color="white" showIcon  single ></uni-notice-bar>
			<image class="bgImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/45783a5a-6e58-444b-824a-71e55f9694af.png" mode="aspectFill"></image>
			<!-- 头部照片 -->
			<image class="topImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d3c0523e-2e90-422e-b895-d92d0ecc9020.png" mode="aspectFill"></image>
			<view class="list">
				<view class="content">
					<view class="topTitle">还剩下{{stock}}库存!</view>
					<view class="progress">
						<ProcessBar :isShow="false" :percent="percent"/>
					</view>
					<view class="listItem">
						<view class="item" v-for="item in couponList" :key="item.couponId">
							<view class="left">
								<view class="img">
									<image class="leftImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/98860304-92bc-4782-aaf0-f5bdf2d2e258.png" mode="aspectFill"></image>
									<!-- <view class="topTitle">
										￥{{item.couponPrice/100}}
										// <span>￥</span>{{item.couponPrice/100}}
									</view> -->
									
									<view class="topTitle">
										<span style="font-size:20rpx;margin-top: 8rpx;">￥</span>{{item.couponPrice/100}}
									</view>
									<view class="bottomTitle">
										满{{item.payAmount/100}}使用
									</view>
									
								</view>
								<view class="textContent">
									<view class="topText">
										{{item.couponName}}
									</view>
									<view class="bottomText1">
										{{item.couponDes}}
									</view>
								</view>
							</view>
							<view class="right">
								<view v-if="item.state ==0" style="background: #24C789;" class="btn" @click="goUse(item)">
									待使用
								</view>
								<view v-if="item.state ==1" style="background: gray;" class="btn" @click="use">
									已使用
								</view>
								<view v-if="item.state ==2" style="background: gray;" class="btn" >
									已过期
								</view>
								<view v-if="item.state ==3" class="btn" @click="goActive(item)">
									待激活
								</view>
								<view v-if="item.state ==4" style="background: gray;" class="btn" >
									已失效
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="hfs"></view>
			<!-- 活动规则 -->
			<view class="activeRule">
				<image class="topImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6ea083cf-677c-4d92-8320-446795726b49.png" mode="aspectFill"></image>
				<image class="linkLeft" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/da8ee40c-b6c2-4312-a6b6-1581f4b15712.png" mode="aspectFill"></image>
				<image class="linkRight" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/da8ee40c-b6c2-4312-a6b6-1581f4b15712.png" mode="aspectFill"></image>
				
				<view class="ruleContent1">
					{{ activityInfo.remark }}
				</view>
			</view>
		</view>
		
		
		
		
	</view>
	
	
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>
<script setup>
	import {ProcessBar} from '@/pagesActivity/ACTE024/components/ProcessBar.vue'
	import {$activityTakePartIn,$getActivityAwards} from '@/http/apiManager.js'
	import {onLoad,onShow,onHide} from '@dcloudio/uni-app'
	import {reactive, ref,getCurrentInstance} from 'vue'
	import storageManage from '@/util/storageManage.js'
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	const couponList = ref([])
	// 库存
	const stock = ref('0')
	// 百分比
	const percent = ref(0)
	// 活动规则
	const activityInfo = ref({})
	// 登录弹窗实例
	const gzLoginPopupRef = ref()
	
	const vdata = reactive({
		isLogin: false, // 用户是否登录
		
	})
	
	// 轮播数据
	const swiperInfo = ref([])
	
	let timer = null
	
	// 广播
	const currentIndex = ref(0)
	const currentText = ref('')
	// const fansNameList = ref('')
	// const vdata = reactive({
	// 	couponList:[]
	// })
	// 跳转卡券详情页面
	const goActive = (item) =>{
		console.log(item,44444)
		uni.navigateTo({
			url: '/pageUser/myCoupon/viewInfo?fansAwardId=' + item.fansAwardId + '&couponId=' + item.couponId
		});
	}
	// 待时用
	const goUse = (item) =>{
		uni.navigateTo({
			url: '/pageUser/myCoupon/viewInfo?fansAwardId=' + item.fansAwardId + '&couponId=' + item.couponId
		});
	}
	
	// 已使用
	const use = () =>{
		assetRangePopup.value.open()
	}
	
	onHide(()=>{
		clearInterval(timer)
	})
	
	// 启动轮播
	const startCarousel = (item) => {
	  timer = setInterval(() => {
	    currentIndex.value = (currentIndex.value + 1) % item.length;
	    currentText.value = item[currentIndex.value]?.realName;
	  }, 4000); // 3秒切换一次
	};
	
	// onUnmounted(() => {
	//   clearInterval(timer); // 清除定时器
	// });
	
	onLoad(({activityId,activityChannelId,activityDetail})=>{
		activityInfo.value = JSON.parse(decodeURIComponent(activityDetail))
		// console.log(activityInfo.value,activityChannelId,activityId,888889999993333)
		vdata.isLogin = storageManage.isLogin()
		// 判断活动是否过期
		if (activityInfo.value.state !== 4) {
			$infoBox.toast('当前活动已下线，正在返回首页！', {
				duration: 2000,
				mask: true
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 2000)
			return
		}
		// 判断用户是否登录过
		if (!vdata.isLogin) {
			// 加载弹窗打开
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// })
			// await getActivityAwards(false) // 获取奖品列表
			uni.showModal({
				title: '提示',
				content: '请先进行登录注册，再进行参与！',
				success({
					cancel
				}) {
					if (cancel) {
						$infoBox.toast('登录失败，无法正常参与活动！')
						console.log('55566666')
						wx.exitMiniProgram()
						return 
						console.log('55566666888888')
						// vdata.errorReason = '1、登录失败，无法正常参与活动！'
					} else {
						gzLoginPopupRef.value.open() // 打开授权弹框
						
					}
				}
			})
			
			$getActivityAwards({activityId,activityTemplateNo:'ACTE028'}).then(res=>{
				console.log(res,'55555')
				stock.value = res.bizData?.stock
				couponList.value = res.bizData?.couponList
				percent.value = res.bizData.percent
				
				// 广播功能
				if(res.bizData?.fansPhoneList.length>0){
					swiperInfo.value = res.bizData?.fansPhoneList
					startCarousel(res.bizData?.fansPhoneList)
					swiperInfo.value = res.bizData?.fansPhoneList
				}
				
				
				console.log(couponList.value,'2222')
				if(res.bizData?.couponList ==undefined || res.bizData?.couponList ==null || res.bizData?.couponList ==[]){
					$activityTakePartIn({activityId,extJson:{activityChannelId},activityTemplateNo:'ACTE028',activityChannelId}).then(res=>{
						console.log(res,'打印用户参与的活动')
						if(res.code ==0){
							$getActivityAwards({activityId,activityTemplateNo:'ACTE028'}).then(res=>{
								console.log(res,'奖品列表')
								stock.value = res.bizData?.stock
								couponList.value = res.bizData?.couponList
								percent.value = res.bizData.percent
								// 广播功能
								if(res.bizData?.fansPhoneList.length>0){
												startCarousel(res.bizData?.fansPhoneList)
												swiperInfo.value = res.bizData?.fansPhoneList
											}
											
								console.log('是否走到了这里1')
							})
						}else{
							console.log('是否走到了这里2')
							
							couponList.value = []
							// 广播功能
							// startCarousel(res.bizData?.fansNameList)
						}
					})
				}
			})
			
		}
		
		
		
		$getActivityAwards({activityId,activityTemplateNo:'ACTE028'}).then(res=>{
			console.log(res,'55555')
			stock.value = res.bizData?.stock
			couponList.value = res.bizData?.couponList
			percent.value = res.bizData.percent
			
			// 广播功能
			if(res.bizData?.fansPhoneList.length>0){
				startCarousel(res.bizData?.fansPhoneList)
				swiperInfo.value = res.bizData?.fansPhoneList
			}
			
			
			console.log(couponList.value,'2222')
			if(res.bizData?.couponList ==undefined || res.bizData?.couponList ==null || res.bizData?.couponList ==[]){
				$activityTakePartIn({activityId,extJson:{activityChannelId},activityTemplateNo:'ACTE028',activityChannelId}).then(res=>{
					console.log(res,'打印用户参与的活动')
					if(res.code ==0){
						$getActivityAwards({activityId,activityTemplateNo:'ACTE028'}).then(res=>{
							console.log(res,'奖品列表')
							stock.value = res.bizData?.stock
							couponList.value = res.bizData?.couponList
							percent.value = res.bizData.percent
							// 广播功能
							if(res.bizData?.fansPhoneList.length>0){
											startCarousel(res.bizData?.fansPhoneList)
											swiperInfo.value = res.bizData?.fansPhoneList
										}
										
							console.log('是否走到了这里1')
						})
					}else{
						console.log('是否走到了这里2')
						
						couponList.value = []
						// 广播功能
						// startCarousel(res.bizData?.fansNameList)
					}
				})
			}
		})
	})
	onShow(()=>{
		// if(assetRangePopup.value?.open){
		// 	console.log('走这里代表有值')
		// 	assetRangePopup.value.open()
		// }else{
		// 	console.log('走这里代表没值')
		// }
		
	})
</script>

<style lang="less">
	
	.container{
		width: 100%;
		height: 100%;
		
		
		.top{
			width: 100%;
			height: 778rpx;
			position: relative;
			.titleImg{
				position: absolute;
				left: 106rpx;
				top: 97rpx;
				width: 538rpx;
				height: 110rpx;
			}
			.subImg{
				position: absolute;
				top: 240rpx;
				left: 142rpx;
				width: 465rpx;
				height: 66rpx;
				.subTitle{
					width: 100%;
					height: 100%;	
				}
				.title{
					position: absolute;
					top: 13rpx;
					left: 79rpx;
					font-family: PingFang SC;
					font-weight: 500;
					// font-size: 2rpx;
					color: #FFFFFF;
					// line-height: 66rpx;
				}
			}
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.bottom{
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #F04D43;
			// overflow-y: scroll;
			padding:0 32rpx 32rpx 32rpx;
			box-sizing: border-box;
			
			.uni-margin-wrap{
				position: absolute;
				z-index: 999;
				top: 12rpx;
				width: 622rpx;
				height: 60rpx;
				// background-color: red;
				.swiper{
					width: 622rpx;
					height: 60rpx;
					swiper-item{
						font-size: 28rpx;
						text-align: center;
						line-height: 60rpx;
						width: 100%;
						height: 100%;
						color: white;
					}
				}
			}
			
			.notification{
				position: absolute;
				left: 64rpx;
				top: 3rpx;
				width: 622rpx;
				height: 60rpx;
				z-index: 5;
				border-radius: 50rpx !important;
				.uni-noticebar{
					border-radius: 50rpx !important;
				}
			}
			.bgImg{
				width: 100%;
				height: 100%;
			}
			.topImg{
				width: 327rpx;
				height: 60rpx;
				position: absolute;
				top: 107rpx;
				left: 212rpx;
				z-index: 3;
			}
			.hfs{
				width: 100%;
				height: 200rpx;
			}
			// 活动规则
			.activeRule{
				width: 687rpx;
				height: 100%;
				background: #FFF6E5;
				box-shadow: 0rpx 10rpx 16rpx 0rpx #FFE6E6;
				border-radius: 20rpx;
				border: 1px solid #D81000;
				position: relative;
				bottom: 38rpx;
				padding: 50rpx 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				.topImg{
					width: 327rpx;
					height: 60rpx;
					position: absolute;
					top: -30rpx;
					left: 175rpx;
				}
				.linkLeft{
					width: 24rpx;
					height: 130rpx;
					position: absolute;
					top: -88rpx;
					left: 130rpx;
				}
				.linkRight{
					width: 24rpx;
					height: 130rpx;
					position: absolute;
					top: -90rpx;
					right: 140rpx;
				}
				
				.ruleContent1{
					// position: relative;
					width: 647rpx;
					height: 100%;
					 word-wrap: break-word;  /* 长单词或连续字符强制换行 */
					   white-space: normal;   /* 确保空格处正常换行（默认值，可省略） */
					// background: #FFFFFF;
					// box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(222,28,0,0.53);
					border-radius: 20rpx;
				}
			}
			.list{
				position: relative;
				width: 687rpx;
				height: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 16rpx 0rpx #FFE6E6;
				border-radius: 20rpx;
				border: 1px solid #D81000;
				display: flex;
				justify-content: center;
				top: 136rpx;
				// left: 30rpx;
				.content{
					width: 706rpx;
					height: 100%;
					background: #FFF6E5;
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(222,28,0,0.53);
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: center;
					padding: 32rpx 30rpx;
					box-sizing: border-box;
					
					.topTitle{
						text-align: center;
						width: 278rpx;
						height: 31rpx;
						font-family: PingFang SC;
						font-weight: 500;
						// font-size: 3rpx;
						color: #FF562E;
						// line-height: 5rpx;
						margin-top: 18rpx;
					}
					.progress{
						width: 100%;
						height: 64rpx;
						margin-top: 28rpx;
					}
					.listItem{
						width: 100%;
						height: 100%;
						// overflow-y: scroll;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 28rpx;
						.item{
							width: 622rpx;
							height: 180rpx;
							background-color: #FFFFFF;
							box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(222,28,0,0.5);
							border-radius: 20rpx;
							padding: 30rpx 25rpx;
							box-sizing: border-box;
							display: flex;
							margin-top: 19rpx;
							.left{
								display: flex;
								// flex-direction: column;
								// align-items: center;
								.img{
									width: 121rpx;
									height: 120rpx;
									position: relative;
									.leftImg{
										width: 100%;
										height: 100%;
									}
									.topTitle{
										width: 120rpx;
										// justify-content: center;
										position: relative;
										// background-color: red;
										left: 0rpx;
										top: -134rpx;
										display: flex;
										justify-content: center;
										color: #EA0B0C;
										font-weight: bold;
										font-size: 28rpx;
										// background-color: red;
										// .left{
										// 	// background: linear-gradient(0deg, #F43D3B, #EA0B0C);
										// 	// box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(222,28,0,0.6);
										// 	color: #EA0B0C;
										// 	font-size: 20rpx;
										// 	position: absolute;
										// 	top: 10rpx;
										// 	left: 30rpx;
										// 	margin-right: 2rpx;
										// }
										// .num{
										// 	position: absolute;
										// 	color: #EA0B0C;
										// 	top: 0rpx;
										// 	left: 48rpx;
										// 	font-weight: bold;
										// 	font-size: 28rpx;
										// }
									}
									.bottomTitle{
										position: absolute;
										width: 120rpx;
										bottom: 9rpx;
										left: 0;
										font-size: 20rpx;
										color: #fff;
										// background-color: red;
										text-align: center;
									}
								}
								.textContent{
									width: 316rpx;
									margin-left: 29rpx;
									.topText{
										font-family: PingFang SC;
										font-weight: 600;
										font-size: 30rpx;
										color: #232323;
										margin-top: 14rpx;
										display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
										-webkit-box-orient: vertical; /* 垂直排列 */
										-webkit-line-clamp: 1; /* 限制显示三行 */
										overflow: hidden; /* 隐藏超出范围的内容 */
										text-overflow: ellipsis; /* 使用省略号 */
									}
									.bottomText1{
										// width: 316rpx;
										font-family: PingFang SC;
										font-weight: 500;
										font-size: 24rpx;
										color: #929292;
										margin-top: 32rpx;
										display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
										-webkit-box-orient: vertical; /* 垂直排列 */
										-webkit-line-clamp: 1; /* 限制显示三行 */
										overflow: hidden; /* 隐藏超出范围的内容 */
										text-overflow: ellipsis; /* 使用省略号 */
									}
								}
							}
							.right{
								flex: 1;
								display: flex;
								justify-content: center;
								align-items: center;
								.btn{
									width: 120rpx;
									height: 52rpx;
									border-radius: 26rpx;
									background-color: #FF562E;
									text-align: center;
									line-height: 52rpx;
									font-weight: 600;
									
									font-size: 26rpx;
									color: #FFFFFF;
								}
							}
						}
					}
				}
			}
		}
		
	}
	
	

</style>

